const { connect } = dva;
const { Form, Form: { Item }, Input, Button, Radio: { Group } } = antd;
const { CrudForm, Password, RemoteSelect } = require('../../Widgets.jsx');
const { FORM: { item: { layout, tailLayout } } } = require("../../Constants.jsx");
import { namespace } from '../../../models/sys/User.jsx'

class SysUserForm extends CrudForm {
    static defaultProps = {
        namespace: namespace
    };
    render() {
        const { form: { getFieldDecorator }, edit: { record }, loading } = this.props;
        return (
            <div style={{padding: '40px 20px'}}>
                <Form onSubmit={this.handleSubmit.bind(this)}>
                    <Item {...layout} label={<span className="form-title">系统用户{record ? '修改' : '录入'}</span>} colon={false} />
                    <Item {...layout} label="用户名" hasFeedback>
                        {getFieldDecorator('username', {
                            rules: [{
                                required: true, message: '请输入用户名!'
                            }, {
                                min: 2, max: 30, message: '用户名长度为2-30!'
                            }]
                        })(
                            <Input />
                        )}
                    </Item>
                    {
                        record ? '' :
                            <Item {...layout} label="登录密码">
                                {getFieldDecorator('password', {
                                    rules: [{
                                        required: true, message: '请输入登录密码!'
                                    }, {
                                        min: 3, max: 20, message: '登录密码长度为3-20!'
                                    }]
                                })(
                                    <Password />
                                )}
                            </Item>
                    }
                    <Item {...layout} label="姓名" hasFeedback>
                        {getFieldDecorator('name', {
                            rules: [{
                                required: true, message: '请输入姓名!'
                            }, {
                                pattern: /^[\u4e00-\u9fa5]{2,4}$/, message: '姓名只允许中文，且长度为2-4!'
                            }]
                        })(
                            <Input />
                        )}
                    </Item>
                    <Item {...layout} label="性别">
                        {getFieldDecorator('sex', {
                            initialValue: '1',
                            rules: [{
                                required: true, message: '请选择性别!'
                            }]
                        })(
                            <Group options={[ { label: '男', value: '1' }, { label: '女', value: '0' } ]} />
                        )}
                    </Item>
                    <Item {...layout} label="工号" hasFeedback>
                        {getFieldDecorator('staffId', {
                            rules: [{ max: 10, message: '工号最大长度为10!' }]
                        })(
                            <Input />
                        )}
                    </Item>
                    <Item {...layout} label="角色">
                        {getFieldDecorator('role.key', {
                            rules: [{ required: true, message: '请选择角色!' }],
                        })(
                            <RemoteSelect allowClear={false} url="sys/role/allQuery" />
                        )}
                    </Item>
                    {
                        record ?
                            <Item {...layout} label="账号状态" >
                                {getFieldDecorator('enable', {
                                    rules: [{ required: true, message: '请选择账号状态!' }]
                                })(
                                    <Group options={[{ label: '正常', value: 1 }, { label: '禁用', value: 0 } ]} />
                                )}
                            </Item>
                            : ''
                    }
                    <Item {...tailLayout}>
                        <Button type="primary" htmlType="submit" disabled={loading} size="large">提交</Button>
                    </Item>
                </Form>
            </div>
        );
    }
}

module.exports = connect(state => {
    return { ...state[namespace], loading: state.loading.models[namespace]  }
})(Form.create()(SysUserForm));